/*
    * @module: src/views/budget/stockIncrementAnalysis.vue
    * @author: zengfx
    * @date: 2020-12-10
    * 经营分析 - 客户经营 - 存增量环比分析
*/
<template>
  <div class="stockIncrementAnalysis_container">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">存增量环比分析</div>
      </div>
    </div>
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px">
        <el-form-item label="选择区域">
          <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
        </el-form-item>
        <el-form-item label="账期">
          <el-date-picker size="mini" v-model="form.acctMonth" value-format="yyyyMM" type="month" placeholder="选择月"></el-date-picker>
        </el-form-item>
        <el-form-item label="锁定">
            <el-select v-model="form.lockFlg"  size="mini" clearable>
                <el-option label="全部" value="" ></el-option>
                <el-option label="是" value="1" ></el-option>
                <el-option label="否" value="0" ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="handle_search()">查询</el-button>
        </el-form-item>
        <el-form-item class="daochu">
          <el-button size="mini" type="orange" @click="handle_export()">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
     <p class="g-unit">收入: 元, 套餐数: 个</p>
    <div class="tableBox">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        height="75vh"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        :span-method="arraySpanMethod"
        ref="table"
        id="table1"
      >
        <el-table-column label prop="class1" class-name="first-title" width="120"></el-table-column>
        <el-table-column width="120" label prop="class2" class-name="second-title"></el-table-column>
        <el-table-column width="120" label prop="class3" class-name="third-title"></el-table-column>
        <el-table-column width="120" label prop="indexName" class-name="forth-title"></el-table-column>
        <el-table-column align="center" v-for="(item,index) in titleList" min-width="84" :key="index" :label="item">
          <el-table-column align="center" width="140" label="上月" :prop="item + index + 'lastMonthValue'"></el-table-column>
          <el-table-column align="center" width="140" label="本月" :prop="item + index + 'thisMonthValue'"></el-table-column>
          <el-table-column align="center" width="140" label="环比" :prop="item + index + 'hbAmt'"></el-table-column>
          <el-table-column align="center" width="140" label="套餐数" :prop="item + index + 'mealNumber'"></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getSessionStorage } from '@/common/js/storage';
import { $budgetAPI } from '@/api';
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
import { mergeSpan } from '@/utils/mixin';
export default {
    data() {
        return {
            form: {
                areaId: '',
                acctMonth: '',
                lockFlg: '',
            },
            tableLoading: false,
            accountInfo: null,
            tableData: [],
            titleList: [],
            spanArr: null
        };
    },
    mounted() {
        this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
        this.form.areaId = this.accountInfo.areaId;
        this.initData();
    },
    methods: {
        // 获取最大账期
        getMaxMonth() {
            return new Promise(resolve => {
                $budgetAPI.getMaxMonth(
                    { areaId: this.form.areaId },
                    res => {
                        if (res.code == 0) {
                            resolve(res.content);
                        }
                    },
                    err => {}
                );
            });
        },
        async initData() {
            let that = this;
            that.form.acctMonth = await that.getMaxMonth();
            that.getData();
        },
        getData() {
            this.tableLoading = true;
            $budgetAPI.getStorageIncrementData(
                {
                    areaId: this.form.areaId,
                    acctMonth: this.form.acctMonth,
                    lockFlg: this.form.lockFlg,
                },
                res => {
                    if (res.code == 0) {
                        this.spanArr = mergeSpan(res.content.data, ['class1', 'class2', 'class3', 'indexName']);
                        res.content.data.map((it, index) => {
                            it.dataList.map((item, i) => {
                                it[item.areaName + i + 'hbAmt'] = item.hbAmt;
                                it[item.areaName + i + 'lastMonthValue'] = item.lastMonthValue;
                                it[item.areaName + i + 'mealNumber'] = item.mealNumber;
                                it[item.areaName + i + 'thisMonthValue'] = item.thisMonthValue;
                            });
                        });
                        this.tableData = res.content.data;
                        this.titleList = res.content.titles;
                    }

                    this.tableLoading = false;
                },
                err => {
                    this.tableLoading = false;
                    console.log(err);
                }
            );
        },
        //table合并行
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2 || columnIndex == 3) {
                return this.spanArr[rowIndex][columnIndex];
            }
        },
        handle_search() {
            this.getData();
        },
        handle_export() {
            var xlsxParam = {
                raw: true
            }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
            let workbook = XLSX.utils.book_new();
            let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table1'), xlsxParam);
            XLSX.utils.book_append_sheet(workbook, ws1, '存增量环比分析');
            let wbout = XLSX.write(workbook, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbout], {
                        type: 'application/octet-stream;charset=utf-8"'
                    }),
                    '存增量环比分析.xlsx'
                );
            } catch (e) {
                if (typeof console !== 'undefined') console.log(e, wbOut);
            }
            return wbout;
        }
    }
};
</script>

<style lang="scss" scoped>
.stockIncrementAnalysis_container {
    /deep/ .el-form-item {
        margin-bottom: 0;
    }
}
</style>